<template>
    <div>
        <header>
        <div class=" wrap" v-if="!flag">
            <div class="left">
                <img src="../assets/img/logo.png" alt="">
            </div>
            <div class="right">
                <ul>
                    <li><router-link to="/index/index2">Home</router-link></li>
                    <li><router-link to="/index/smartwatch2" @mousemove="zhntop">Smart Watch</router-link></li>
                    <li><router-link to="/index/zhinsh1">Smart Bracelet</router-link></li>
                    <li><router-link to="/index/fuwu2">Customization</router-link></li>
                    <li><router-link to="/index/guanyu2">About us</router-link></li>
                    <li><router-link to="/index/lianxi2">Contact us</router-link></li>
                    <li><router-link to="/index/xinwei2">News</router-link></li>
                </ul>
                <span><p>Language&gt;</p>
                    <ul>
                        <li @click="lang2">Chinese</li>
                        <li @click="lang">English</li>
                    </ul>
                    </span>
            </div>
        </div>
        <div class="wrap " v-else>
            <div class="left">
                <img src="../assets/img/logo.png" alt="">
            </div>
            <div class="right">
                <ul>
                    <li ><router-link to="/index/index1">首页</router-link></li>
                    <li class="zhnslist" @mousemove="zhntop"><router-link to="/index/smartwatch">智能手表</router-link></li>
                    <li><router-link to="/index/zhinsh">智能手环</router-link></li>
                    <li><router-link to="/index/fuwu">定制服务</router-link></li>
                    <li><router-link to="/index/guanyu">关于我们</router-link></li>
                    <li><router-link to="/index/lianxi">联系我们</router-link></li>
                    <li><router-link to="/index/xinwei">新闻</router-link></li>
                </ul>
                <span><p>语言&gt;</p>
                <ul>
                    <li @click="lang2">中文</li>
                    <li @click="lang">英文</li>
                    </ul>
                </span>
            </div>
        </div>
    </header>
        <div class="zhnsbtop" ref="btop" style="display:none;" @mouseout="zhtop" v-if="!flag">
        <div class="w1080">
            <div class="left">
                <h3>Smart Watch</h3>
                <ul>
                    <li @mousemove="hqtsa(val.id)" v-for="(val,i) in dates.children1" :key="i"><a href="javascript:;">{{val.name}} ></a></li>
                    <!-- <li  @mousemove="l1=2"><a href="javascript::">最畅销品  ></a></li>
                    <li  @mousemove="l1=3"><a href="javascript::">蓝牙手表 > </a></li>
                    <li  @mousemove="l1=4"><a href="javascript::">通话手表 > </a></li> -->
                </ul>
            </div>
            <div class="right">
                <div class="right-item">
                    <ul>
                        <li v-for="(val, i) in datss" :key="i">
                            <a href="javascript:;" @click="edit2(val.id)">
                                <img :src="'http://www.kymid.com/testphp/public'+ val.image" alt="">
                                <h3>{{val.name_en}}</h3>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- <div class="right-item" v-else-if="l1==2">
                    <ul>
                        <li>
                            <a href="javascript:;">
                                <img src="../assets/img/G9-2.jpg" alt="">
                                <h3>Smart Watch G9</h3>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src="../assets/img/G9-2.jpg" alt="">
                              <h3>Smart Watch G9</h3>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src="../assets/img/G9-2.jpg" alt="">
                               <h3>Smart Watch G9</h3>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src="../assets/img/G9-2.jpg" alt="">
                              <h3>Smart Watch G9</h3>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="right-item"  v-else-if="l1==3">
                    <ul>
                        <li>
                            <a href="javascript:;">
                                <img src="../assets/img/G9-2.jpg" alt="">
                                <h3>Smart Watch G9</h3>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src="../assets/img/G9-2.jpg" alt="">
                              <h3>Smart Watch G9</h3>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src="../assets/img/G9-2.jpg" alt="">
                               <h3>Smart Watch G9</h3>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src="../assets/img/G9-2.jpg" alt="">
                              <h3>Smart Watch G9</h3>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="right-item" v-else>
                    <ul>
                        <li>
                            <a href="javascript:;">
                                <img src="../assets/img/G9-2.jpg" alt="">
                                <h3>Smart Watch G9</h3>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src="../assets/img/G9-2.jpg" alt="">
                              <h3>Smart Watch G9</h3>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src="../assets/img/G9-2.jpg" alt="">
                               <h3>Smart Watch G9</h3>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src="../assets/img/G9-2.jpg" alt="">
                              <h3>Smart Watch G9</h3>
                            </a>
                        </li>
                    </ul>
                </div> -->
            </div>
        </div>
        <div class="navall">
            <router-link to="/index/alldocuments2">All models >></router-link>
        </div>
    </div>
       <div class="zhnsbtop" ref="btop" style="display:none;" @mouseout="zhtop" v-else >
        <div class="w1080">
            <div class="left">
                <h3>智能手表</h3>
                <ul>
                    <li @mousemove="hqts(val.id)" v-for="(val,i) in date.children1" :key="i"><a href="javascript:;">{{val.name}} ></a></li>
                </ul>
            </div>
            <div class="right">
                <div class="right-item">
                    <ul>
                        <li v-for="(val, i) in dats" :key="i">
                            <a href="javascript:;" @click="edit(val.image,val.id)">
                                <img :src="'http://www.kymid.com/testphp/public'+ val.image" alt="">
                                <h3>{{val.name_en}}</h3>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="navall">
            <li ><router-link to="/index/alldocuments">查看更多 >></router-link></li>
        </div>
    </div>
    </div>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted, nextTick, onUnmounted } from 'vue'
const { proxy } = getCurrentInstance()
if (!JSON.parse(localStorage.getItem('flag'))) {
    localStorage.setItem('flag', true)
}
onUnmounted(() => {
    localStorage.removeItem('flag')
})
const flag = ref(JSON.parse(localStorage.getItem('flag')))
const lang = () => {
    localStorage.setItem('flag', false)
    flag.value = JSON.parse(localStorage.getItem('flag'))
    proxy.$router.push('/index/index2')
}
const lang2 = () => {
    localStorage.setItem('flag', true)
    flag.value = JSON.parse(localStorage.getItem('flag'))
    proxy.$router.push('/index/index1')
}
function zhntop (e) {
    proxy.$refs.btop.style.display = 'block'
    console.log(e.clientY)
}
function zhtop (e) {
      if (e.clientY >= 296) {
       nextTick(() => {
        proxy.$refs.btop.style.display = 'none'
          })
      }
}

onMounted(() => {
hqid()
hqts()
hqids()
hqtsa()
})
const date = ref([])
async function hqid () {
    const { data: res } = await proxy.$http.get('type_list')
    date.value = res.msg[1]
}
const dates = ref([])
async function hqids () {
    const { data: res } = await proxy.$http.get('type_list?lang=en')
    console.log(res)
    dates.value = res.msg[1]
    console.log(date.value)
}
const dats = ref([])
async function hqts (id) {
    // console.log(id)
    const { data: res } = await proxy.$http.get('good_type?product_id=' + id)
    dats.value = null
    nextTick(() => {
dats.value = res.msg.slice(0, 4)
    })
}
const datss = ref([])
async function hqtsa (id) {
    const { data: res } = await proxy.$http.get('good_type?product_id=' + id)
    datss.value = null
    nextTick(() => {
datss.value = res.msg.slice(0, 4)
    })
}
function edit (imgs, id) {
    // console.log(imgs, id)
    // localStorage.setItem('uname', val.data)
    proxy.$store.commit('edit', id)
    proxy.$router.push('/index/particulars')
}
function edit2 (id) {
    // console.log(imgs, id)
    // localStorage.setItem('uname', val.data)
    console.log(id)
    proxy.$store.commit('edit', id)
    proxy.$router.push('/index/particulars2')
}
</script>
